// 无缝轮播图重点：第一张图片和最后一张图片相同，当最后一张图片切换到第一张的时候，不要滑动，要瞬间切记
// 

function getImg() {
    let imgArr = [];
    for (let i = 0; i < 5; i++) {
        $.ajax({
            type: "get",
            url: "https://api.thecatapi.com/v1/images/search",
            data: {
                size: "full"
            },
            dataType: "json", //表示数据格式是JSON
            async: false, //异步改为同步
            success: function (res) {
                imgArr.push(res[0].url);
            }
        })
    }
    return new Promise(function (resolve, reject) {
        if (imgArr.length === 5) {
            resolve(imgArr);
        }
    })
}

let pm = getImg();
pm.then(function (res) {
    console.log(res);
    res.push(res[res.length-1]);
    let imgArr=res;
    // 1. 把图片渲染到页面中， 同时渲染对应的小圆点
    $(window).bind("load", function () {
        for (let i = 0; i < imgArr.length; i++) {
            // 渲染图片
            $(".img-box").html($(".img-box").html() + `<img src="${imgArr[i]}" alt="">`);
            // 渲染小圆点
            $(".dotted").html($(".dotted").html() + ` <li id="${i}">${i}</li>`);
        }
        // 在图片盒子最后增加一张图片，和第一张相同
        $(".img-box").html($(".img-box").html() + `<img src="${imgArr[0]}" alt="">`);
    });
})


// 模拟从后端获取图片数据，放在数组中

// 获取相关元素节点



// 2.自动轮播
let index = 0; //表示图片下标
// 移动图片盒子位置和对应小圆点样式
function change(index) {
    // 移动图片盒子的位置
    $(".img-box").css("left", -$(".father").outerWidth() * index + "px");
    // 根据图片，调整小圆点样式
    $("li").removeClass("max");
    if (index == $("img").length - 1) {
        $("li").eq(0).addClass("max");
    } else {
        $("li").eq(index).addClass("max");
    }

}


function move() {
    index++; //下一张
    // 当图片走到最后的时候，回到第一张
    if (index == $("img").length) {
        index = 0;
        // 清除过渡效果
        $(".img-box").css("transition", "none");
        // 为了解决最后一张到第二张图片之间多2s的问题
        clearInterval(stop);
        stop = setTimeout(move, 0);

    } else {
        $(".img-box").css("transition", "all 1s");

        stop = setTimeout(move, 2000);
    }

    change(index);
    console.log("41:", index);

}
let stop = setTimeout(move, 2000);

// 鼠标移入father盒子，停止自动轮播
$(".father").mouseenter(function () {
    clearInterval(stop);
});

// 鼠标移出father盒子，开始自动轮播
$(".father").mouseleave(function () {
    stop = setTimeout(move, 2000);
});

$(".father").click(function () {
    // 3.点击前后按钮进行图片切换
    // 左箭头
    if (event.target.className == "arrow pre") {
        index--; //图片下标减一
        console.log("89:", index);

        if (index == -1) { //如果已经是第一张图片，再往前就是最后一张图片
            index = $("img").length - 1;
            // 清除过渡效果
            $(".img-box").css("transition", "none");
            // 移动图片盒子的位置
            $(".img-box").css("left", -$(".father").outerWidth() * index + "px");

            setTimeout(function () {
                index--; //上一张
                $(".img-box").css("transition", "all 1s");
                // 移动图片盒子的位置
                $(".img-box").css("left", -$(".father").outerWidth() * index + "px");

            }, 0)


        } else {
            $(".img-box").css("transition", "all 1s");

        }
        change(index);




    }
    // 右箭头
    if (event.target.className == "arrow next") {
        index++; //图片下标加一
        console.log(index)
        if (index == $("img").length) { //如果已经是最后一张图片，再往前就是第一张图片
            index = 0;
            $(".img-box").css("transition", "none");

            // 移动图片盒子的位置
            $(".img-box").css("left", -$(".father").outerWidth() * index + "px");

            setTimeout(function () {
                index++; //下一张
                $(".img-box").css("transition", "all 1s");

                // 移动图片盒子的位置
                $(".img-box").css("left", -$(".father").outerWidth() * index + "px");

            }, 0);
        } else {
            $(".img-box").css("transition", "all 1s");

        }
        change(index);

    }
    // 4.点击小圆点进行图片切换
    if (event.target.localName == "li") {
        // 判断当前点击的是哪一个小圆点，才能准确的移动图片
        // 通过获取文本值(或者获取id值)，来确定当前点击的是哪一个小圆点
        index = event.target.innerText * 1;
        change(index);
    }

})